<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
	<link rel="stylesheet" href="../../../iconfont/iconfont.css">
</head>
<body class="page__bg">
<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">卡片</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="daui-headline daui-headline_left">
	<div class="daui-headline__text-area">
		<h2 class="daui-headline__title">卡片 Card</h2>
		<p class="daui-headline__desc">卡片布局</p>
	</div>
</div>

<div class="page__bd">
	<div class="daui-card daui-card_access">
		<div class="daui-card__hd">文字组合列表</div>
		<div class="daui-card__bd">
			<div class="daui-media daui-media_text">
				<h4 class="daui-media__title">标题一</h4>
				<p class="daui-media__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
			</div>
			<div class="daui-media daui-media_text">
				<h4 class="daui-media__title">标题二</h4>
				<p class="daui-media__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
			</div>
		</div>
		<div class="daui-card__ft">
			<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
				<div class="weui-cell__bd">查看更多</div>
				<span class="weui-cell__ft"></span>
			</a>
		</div>
	</div>
	<div class="daui-card daui-card-access">
		<div class="daui-card__hd">图文组合列表</div>
		<div class="daui_card__bd">
			<a href="javascript:void(0);" class="daui-media daui-media_appmsg">
				<div class="daui-media__hd">
					<img class="daui-media__thumb" src="http://www.danceui.com/danceui-icon.png" alt="" />
				</div>
				<div class="daui-media__bd">
					<h4 class="daui-media__title">标题一</h4>
					<p class="daui-media__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
				</div>
			</a>
			<a href="javascript:void(0);" class="daui-media daui-media_appmsg">
				<div class="daui-media__hd">
					<img class="daui-media__thumb" src="http://www.danceui.com/danceui-icon.png" alt="" />
				</div>
				<div class="daui-media__bd">
					<h4 class="daui-media__title">标题二</h4>
					<p class="daui-media__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
				</div>
			</a>
		</div>
		<div class="daui-card__ft">
			<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
				<div class="weui-cell__bd">查看更多</div>
				<span class="weui-cell__ft"></span>
			</a>
		</div>
	</div>
	<div class="daui-card">
		<div class="daui-card__hd">商品收藏</div>
		<div class="daui-card__bd">
			<div class="daui-media daui-media_appmsg">
				<div class="daui-media__bd">
					<h4 class="daui-media__title">标题一</h4>
					<p class="daui-media__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
				</div>
			</div>
			<div class="daui-media daui-media_appmsg">
				<div class="daui-media__bd">
					<h4 class="daui-media__title">标题二</h4>
					<p class="daui-media__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
				</div>
			</div>
		</div>
		<div class="daui-card__ft">
			<div class="weui-cell">
				<div class="weui-cell__bd"></div>
				<div class="weui-cell__ft">
					<a href="javascript:void(0);" class="weui-btn daui-btn_success daui-btn_sm">编辑</a>
					<a href="javascript:void(0);" class="weui-btn daui-btn_warning daui-btn_sm">取消收藏</a>
				</div>
			</div>
		</div>
	</div>
	<div class="daui-card">
		<div class="daui-card__hd">小图文组合列表</div>
		<div class="daui-card__bd">
			<a class="weui-cell weui-cell_access" href="javascript:;">
				<div class="weui-cell__hd">
					<img src="http://www.danceui.com/danceui-icon.png" alt="" style="width:20px;margin-right:5px;display:block">
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<p>文字标题</p>
				</div>
				<span class="weui-cell__ft"></span>
			</a>
			<a class="weui-cell weui-cell_access" href="javascript:;">
				<div class="weui-cell__hd">
					<img src="http://www.danceui.com/danceui-icon.png" alt="" style="width:20px;margin-right:5px;display:block">
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<p>文字标题</p>
				</div>
				<span class="weui-cell__ft"></span>
			</a>
		</div>
	</div>
	<div class="daui-card">
		<div class="daui-card__hd">文字列表附来源</div>
		<div class="daui-card__bd">
			<div class="daui-media daui-media_text">
				<h4 class="daui-media__title">标题一</h4>
				<p class="daui-media__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
				<ul class="daui-media__info">
					<li class="daui-media__info__meta">文字来源</li>
					<li class="daui-media__info__meta">时间</li>
					<li class="daui-media__info__meta daui-media__info__meta_extra">其它信息</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="daui-card daui-card_access daui-card_full">
		<div class="daui-card__hd">宽度100%</div>
		<div class="daui-card__bd">
			<div class="daui-media daui-media_text">
				<h4 class="daui-media__title">标题一</h4>
				<p class="daui-media__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
			</div>
		</div>
	</div>
	<div class="daui-cells__title">自定义TitBar</div>
	<div class="daui-card daui-card_titbar-one">
		<div class="daui-card__hd">带圈圈的</div>
		<div class="daui-card__bd daui-card__bd-padding">
			这里是卡片的内容
		</div>
	</div>
	
	<div class="daui-cells__title">自定义TitBar</div>
	<div class="daui-card daui-card_titbar-two">
		<div class="daui-card__hd">带竖条的</div>
		<div class="daui-card__bd daui-card__bd-padding">
			这里是卡片的内容
		</div>
	</div>
	
	<div class="daui-cells__title">宽度占满</div>
	<div class="daui-card daui-card_titbar-one daui-card_full">
		<div class="daui-card__hd">宽度占满</div>
		<div class="daui-card__bd daui-card__bd-padding">
			这里是卡片的内容
		</div>
	</div>
	
	<div class="daui-cells__title">宽度占满</div>
	<div class="daui-card daui-card_titbar-two daui-card_full">
		<div class="daui-card__hd">宽度占满</div>
		<div class="daui-card__bd daui-card__bd-padding">
			这里是卡片的内容
		</div>
	</div>
	
	<div class="daui-cells__title">整体圆润的风格</div>
	<div class="daui-card daui-card_mellow daui-card_titbar-one">
		<div class="daui-card__hd">整体圆润的风格</div>
		<div class="daui-card__bd daui-card__bd-padding">
			这里是卡片的内容
		</div>
	</div>
	
	<div class="daui-cells__title">整体圆润的风格及自定义TitBar</div>
	<div class="daui-card daui-card_mellow daui-card_titbar-one">
		<div class="daui-card__hd">整体圆润的风格</div>
		<div class="daui-card__bd daui-card__bd-padding">
			这里是卡片的内容
		</div>
	</div>
	
</div>

<div class="daui-gap daui-gap_transparent"></div>
<div class="daui-footer">
	<div class="daui-footer__links">
		<a class="daui-footer__links-item" href="../index.html">DanceWeUI首页</a>
		<a class="daui-footer__links-item" href="https://gitee.com/lianlianzan/danceui" target="_blank">去码云下载</a>
	</div>
	<div class="daui-footer__text">Copyright &copy; DanceUI</div>
</div>

</body>
</html>